<template>
    <div class="app-container" style="margin-right: 0;padding-right: 0">

        <el-row :gutter="20">
            <el-col :span="showFlow?19:24">
                <div class="card-wrap flex-column justify-end card-padding">

                    <el-tabs v-model="activeName">
                        <el-tab-pane label="司机基本信息" name="first">
                            <el-descriptions title="">
                                <el-descriptions-item label="司机姓名">{{
                                        form.driverName|filterNull
                                    }}
                                </el-descriptions-item>
                                <el-descriptions-item label="联系电话">{{
                                        form.driverPhone|filterNull
                                    }}
                                </el-descriptions-item>
                                <el-descriptions-item label="劳务公司">{{
                                        form.laborCompanyName|filterNull
                                    }}
                                </el-descriptions-item>
                                <el-descriptions-item label="所在城市">
                                    {{ form.cityName|filterNull }}
                                </el-descriptions-item>

                                <el-descriptions-item label="所属公司">{{
                                        form.belongCompanyName|filterNull
                                    }}
                                </el-descriptions-item>
                                <el-descriptions-item label="驾照发放日">
                                    {{ form.driverLicenseDate|filterNull }}
                                </el-descriptions-item>
                                <el-descriptions-item label="驾照种类">
                                    {{ form.driverLicenseType|filterNull }}
                                </el-descriptions-item>
                                <el-descriptions-item label="驾照号码">
                                    {{ form.driverLicenseNo|filterNull }}
                                </el-descriptions-item>
                                <el-descriptions-item label="nc供应商id">
                                    {{ form.ncSupplierId|filterNull }}
                                </el-descriptions-item>
                                <el-descriptions-item label="nc供应商code">
                                    {{ form.ncSupplierCode|filterNull }}
                                </el-descriptions-item>
                                <el-descriptions-item label="备注">
                                    {{ form.remark|filterNull }}
                                </el-descriptions-item>
                                <el-descriptions-item label="删除备注" v-if="1==form.delStatus">
                                    {{ form.delRemark|filterNull }}
                                </el-descriptions-item>

                                <el-descriptions-item label="身份证">
                                    <div class="flex">
                                        <ImageCommon disabled v-model="form.identityFrontImg"></ImageCommon>
                                        <ImageCommon disabled v-model="form.identityBackImg"></ImageCommon>
                                    </div>
                                </el-descriptions-item>
                                <el-descriptions-item label="驾驶证">
                                    <div class="flex">
                                        <ImageCommon disabled v-model="form.driverLicenseFrontImg"></ImageCommon>
                                        <ImageCommon disabled v-model="form.driverLicenseBackImg"></ImageCommon>
                                    </div>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-tab-pane>

                        <el-tab-pane label="客户车辆信息" name="second">
                            <el-table
                                border
                                :data="datalist"
                                style="width: 100%">
                                <el-table-column
                                    prop="orderCarCode"
                                    align="center"
                                    label="订单编码"
                                    width="280">
                                </el-table-column>
                                <el-table-column
                                    prop="leaseeName"
                                    align="center"
                                    label="客户名称"
                                    width="280">
                                </el-table-column>
                                <el-table-column
                                    prop="carPlateNo"
                                    align="center"
                                    label="车牌号">
                                </el-table-column>
                                <el-table-column
                                    prop="contractDate"
                                    align="center"
                                    label="有效时间">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>

                </div>
            </el-col>
            <el-col :span="showFlow?5:0" style="margin: -20px -20px 20px 0">
                <FlowRecord v-if="showFlow" :id="form.flowId"></FlowRecord>
            </el-col>
        </el-row>

        <div class="card-wrap flex justify-end card-padding" style="margin-right: 20px">
            <el-button @click="cancel">返回</el-button>
            <!--              <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>-->
        </div>

    </div>
</template>

<script>


import {driverDetail, getCarInfoByCustomerId} from "@/api/memberManage/driverList";

export default {
    name: "driverDetail",
    data() {
        return {
            buttonLoading: false,
            form: {},
            activeName: 'first',
            datalist: []
        };
    },
    computed: {
        showFlow() {
            return 'write' != this.state && this.form.flowId !== undefined && this.form.flowId !== null && this.form.flowId !== ''
        }
    },
    watch: {
        '$route': {
            handler(val) {
                console.log('this.$route', this.$route)

                if (val && val.name == this.$options.name) {
                    if (this.$route.query && this.$route.query.driverId && !this.$route.query.tabClick) {
                        this.getOldData(this.$route.query.driverId)
                    }
                }
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        cancel() {
            this.$router.back();
            this.$store.dispatch('tagsView/delView', this.$route);
        },
        getOldData(driverId) {
            driverDetail(driverId).then(res => {
                this.form = res.data
            })

            getCarInfoByCustomerId(driverId).then(res => {
                this.datalist = res.data
            })
        },
    }
};
</script>


<style lang="scss" scoped>


</style>
